<!-- 一个很牛逼的代码编辑器 -->
<!-- 黑暗模式 -->
<!-- 官方文档https://microsoft.github.io/monaco-editor/ -->
<div id="container"  style="width:100%;height:600px;border:1px solid grey"></div>
<div>
    <button onclick="a()">撤销</button>
    <button onclick="b()">恢复</button>
    <button onclick="c()">获取代码</button>
    <button onclick="d()">设置代码</button>
    <button onclick="add_div()">demo添加div</button>
    <button onclick="get()">获取选中内容</button>
</div>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/third_part/monaco-editor/vs/loader.js"></script>

<script>
    var editor=null;
    require.config({
        'vs/nls': {
            availableLanguages: {
                '*': 'zh-cn'
            }
        },
        paths: { 'vs': 'https://res.dcdev.net/dcdev/v1.0.6/assets/third_part/monaco-editor/vs' }
    });

    require(['vs/editor/editor.main'], function() { 
        //创建编辑器
        editor = monaco.editor.create(
            document.getElementById('container'),
            { 
                value: ['123456789'].join('\n'),
                language: 'html',
                theme: "vs-dark",
            });

        //监听编辑框内容变化
        editor.onDidChangeModelContent((e) => { 
            console.log(e)   
        });
        editor.addAction({
            id: "mybutton",
            label: "添加div",
            contextMenuGroupId: "mybuttongrp",
            run: (editor) => {
                //add_div();
                //获取选中位置
                // var selection = editor.getSelection().toString()
                // var temp = editor.getValue();
                // // editor.executeEdits("", [
                // //     {
                // //     range: new monaco.Range(selection.endLineNumber, selection.endColumn, selection.endLineNumber, selection.endColumn),
                // //     text: "<div>"+"</div>"
                // //     }
                // // ])
                // // var temp =temp.replace(selection.selection_temp);
                //  console.log(selection);
                // // console.log(temp);
            }
        });
        //获取选中内容的方法
        //该死的点击就会赋值，所以先放到临时区吧
        editor.onMouseDown(e => {
            window.startLineNumber_temp = e.target.position.lineNumber;//获取起始行
            window.startColumn_temp = e.target.position.column;//获取起始列
            //console.log("起始地址："+startLineNumber,startColumn)
        })
        editor.onDidChangeCursorPosition(e => {
            //编辑器内容changge事件
            window.endLineNumber = e.position.lineNumber;//获取结束行
            window.endColumn = e.position.column;//获取结束列
            //这里知道结束选中了，把起始行列的临时区的值放到正式区
            //这样解决了，因为右键菜单，导致起始行列错乱的问题
            window.startLineNumber=window.startLineNumber_temp
            window.startColumn=window.startColumn_temp
            //console.log(e)
         })
         
        //设置编辑框内容 
        //editor.setValue("function func(){\nconsole.log("hello"\n}");

    });
    function get (){
        console.log("起始地址："+window.startLineNumber,window.startColumn)
        console.log("结束地址："+window.endLineNumber,window.endColumn)
        var result=""
        var temp =editor.getValue();
        var temp = temp.split('\n');//行分隔
        if(window.startLineNumber>window.endLineNumber || (window.startLineNumber==window.endLineNumber && window.startColumn>window.endColumn)){
            console.log("后框选")
            //把位置调换应该可以了
            var endLineNumber_temp=window.endLineNumber
            var endColumn_temp=window.endColumn
            window.endLineNumber=window.startLineNumber
            window.endColumn=window.startColumn
            window.startLineNumber=endLineNumber_temp
            window.startColumn=endColumn_temp
            console.log("起始地址2："+window.startLineNumber,window.startColumn)
            console.log("结束地址2："+window.endLineNumber,window.endColumn)
        }
            for (let i = window.startLineNumber-1; i < window.endLineNumber; i++) {
                if(i==window.startLineNumber-1){//判断是否起始行
                    result = result+ temp[i].substring(window.startColumn-1,temp[i].length);
                }else{
                    result = result+"\n" +temp[i]
                }
 
            }
        console.log(result)
        return result
    }
    function add_div(){
        content="1222"
        // var select = get();
        // var content = editor.getValue();
        // content=content.replace(select,"<div>\n\t"+select+"\n</div>")
        // editor.setValue(content);
        editor.focus()
        var selection = editor.getSelection()
        var range = new monaco.Range(selection.startLineNumber, selection.startColumn, selection.endLineNumber, selection.endColumn)
        var id = { major: 1, minor: 1 }
        var op = { identifier: id, range: range, text: content, forceMoveMarkers: true }
        editor.executeEdits('js_script_textarea_div', [op])
    }
    // function add_div(){
    //     console.log("起始地址："+window.startLineNumber,window.startColumn)
    //     console.log("结束地址："+window.endLineNumber,window.endColumn)
    //     var temp =editor.getValue();
    //     var temp = temp.split('\n');//行分隔
    //     //判断是不是从后面框选
    //     if(window.endColumn<window.startColumn && window.startLineNumber<=window.endLineNumber){
    //         for (let i = 0; i < temp.length; i++) {
    //             if(i==window.endLineNumber-1){//判断是否结束行
    //                 var start = temp[i].substring(0,window.endColumn-1);//截取前半部分
    //                 console.log(start)
    //                 var end = temp[i].substring(window.endColumn-1,temp[i].length);//截取后半部分
    //                 var result = start+"<div>"+end;
    //                 //判断开始位置也是在同一行
    //                 if(window.startLineNumber==window.endLineNumber){
    //                     window.startColumn=window.startColumn+5;//因为内容添加了，所以endColumn应加5
    //                 }
    //                 temp[i]=result;
    //                 console.log(result)
    //             }
    //             if(i==window.startLineNumber-1){//判断是否起始行
    //                 var start = temp[i].substring(0,window.startColumn-1);//截取前半部分
    //                 var end = temp[i].substring(window.startColumn-1,temp[i].length);//截取后半部分
    //                 var result = start+"</div>"+end;
    //                 temp[i]=result;
    //                 console.log(result)
    //             }
 
    //         }
    //     }else{
    //         for (let i = 0; i < temp.length; i++) {
    //             if(i==window.startLineNumber-1){//判断是否起始行
    //                 var start = temp[i].substring(0,window.startColumn-1);//截取前半部分
    //                 var end = temp[i].substring(window.startColumn-1,temp[i].length);//截取后半部分
    //                 var result = start+"<div>"+end;
    //                 //判断结束位置也是在同一行
    //                 if(window.startLineNumber==window.endLineNumber){
    //                     window.endColumn=window.endColumn+5;//因为内容添加了，所以endColumn应加5
    //                 }
    //                 temp[i]=result;
    //                 console.log(result)
    //             }
    //             if(i==window.endLineNumber-1){//判断是否结束行
    //                 var start = temp[i].substring(0,window.endColumn-1);//截取前半部分
    //                 console.log(start)
    //                 var end = temp[i].substring(window.endColumn-1,temp[i].length);//截取后半部分
    //                 var result = start+"</div>"+end;

    //                 temp[i]=result;
    //                 console.log(result)
    //             }
    //         }
    //     }

    //     var ans="";
    //     for (let j = 0; j < temp.length; j++) {
    //          ans = ans+temp[j]+"\n"

    //     }
    //     console.log(ans);
    //     editor.setValue(ans);
    // }
    function a (){
        editor.getModel().undo();
    }
    function b (){
        editor.getModel().redo();
    }
    function c (){
        console.log(editor.getValue());
        alert(editor.getValue());
    }
    function d (){
        editor.setValue("<h1>设置内容</h1>");
    }
</script>
